<template>
  <a-drawer
    v-model:visible="visible"
    :on-before-ok="beforeOk"
    @ok="handleOk"
    @cancel="handleCancel"
    @close="emits('update:modelValue', false)"
    unmountOnClose
    class="global-filter-drawer"
    width="566px"
  >
    <template #title>
      <span class="title">全局筛选</span>
    </template>
    <a-form
      class="global-filter-from"
      :model="model"
      ref="formRef"
      auto-label-width
    >
      <a-form-item
        label="数据时间"
        v-if="ifTimeCan"
        :label-col-style="{ flex: '0 0 auto' }"
      >
        <component
          :is="getCurrentTimeComponent(model.dateCondition.timeUnit)"
          v-model="model.dateCondition.fixDate"
          :style="{ width: '270px' }"
        ></component>
      </a-form-item>
      <a-form-item
        class="dim-form-item"
        :label-col-style="{ flex: 1 }"
        @click.prevent="() => {}"
      >
        <template #label>
          <span>维度</span>
          <a-button
            v-show="model.conditions.length"
            type="text"
            @click="clearDim"
            >清空</a-button
          >
        </template>
        <FilterConfig
          v-if="visible && dimensionArr"
          :dimensionArr="dimensionArr"
          v-model="model.conditions"
          :showAndOr="false"
          :showIn="false"
        />
      </a-form-item>
    </a-form>
  </a-drawer>
</template>
<script lang="ts" setup>
import { ref, watch, reactive } from 'vue';
import { useRoute } from 'vue-router';
import API from '@/services';
import FilterConfig from '../graphRightConfig/filterConfig.vue';
import { cloneDeep } from 'lodash';
import { GlobalFilterDataType, TimeFrameType } from '../../type';
import { Message } from '@arco-design/web-vue';
import { getCurrentTimeComponent, quarterFormater } from '../../hooks';

const props = withDefaults(
  defineProps<{
    modelValue: boolean;
    data: GlobalFilterDataType | null | undefined;
  }>(),
  {
    modelValue: false,
    data: null
  }
);
const emits = defineEmits(['update:modelValue', 'update:data', 'ok']);
const route = useRoute();
const visible = ref(false);
const formRef = ref();
const ifTimeCan = ref(true);
const dimensionArr = ref<any[] | undefined>(undefined);

const model = reactive<GlobalFilterDataType>({
  dateCondition: {
    dateMode: 'FIXDATE',
    fixDate: '',
    offset: 0,
    timeUnit: 'day'
  },
  conditions: []
});
const getGlobalFilter = async () => {
  const { code, data = {} } =
    await API.metricsBoard.getMetricsBoardGlobalConditions({
      boardId: +route.params.id
    });
  if (code === 200) {
    model.dateCondition.timeUnit = data.timeUnit;
    ifTimeCan.value = data.ifTimeCan ?? ifTimeCan.value;
    dimensionArr.value = data.dimOptions;
  }
};
getGlobalFilter();

const beforeOk = (done: any) => {
  if (
    model.conditions.length &&
    model.conditions.some((item) => !item.dimId || !item.values.length)
  ) {
    Message.warning('选择的维度筛选有未选项');
    return false;
  }
  done();
};
const handleOk = () => {
  let data = cloneDeep(model);
  data.conditions.forEach((item: any) => {
    delete item._dimensionEnumOptions;
  });
  if (data.dateCondition.timeUnit === TimeFrameType.QUARTER) {
    data.dateCondition.fixDate = quarterFormater(
      data.dateCondition.fixDate,
      TimeFrameType.QUARTER
    );
  }
  emits('update:data', data);
  emits('ok', data);
  visible.value = false;
};

const clearDim = () => {
  model.conditions = [];
};

const handleCancel = () => {
  visible.value = false;
};

watch(
  () => props.modelValue,
  (val) => {
    visible.value = val;
  }
);
</script>

<style lang="scss">
.global-filter-drawer {
  .arco-drawer-header .arco-drawer-title .title {
    font-weight: 600;
  }
  .arco-form-item-label {
    font-weight: 500;
    color: var(--color-text-1);
  }
  .arco-form-item {
    margin-bottom: 18px;
  }
  .dim-form-item {
    flex-wrap: wrap;
    .arco-form-item-label {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
    }
  }
}
</style>
